<!-- 新增/修改弹框 -->
<template>
  <!-- 新增/修改弹窗 -->
  <el-dialog
    v-model="visible"
    :width="screenWidth"
    :fullscreen="mobile === 'mobile'"
    :title="dialogDetail.title"
    draggable
    close-icon="CloseBold"
    @close="closeDialog"
  >
    <el-descriptions
      v-loading="loading"
      class="margin-top"
      :column="itemSpan"
      :size="'large'"
      border
    >
      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">流水号</div>
        </template>
        {{ dataInfo.serialNumber }}
      </el-descriptions-item>
      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">项目名称</div>
        </template>
        {{ dataInfo.prjName }}
      </el-descriptions-item>
      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">项目编号</div>
        </template>
        {{ dataInfo.prjNum }}
      </el-descriptions-item>

      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">账户名称</div>
        </template>
        {{ dataInfo.username }}
      </el-descriptions-item>

      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">银行账号</div>
        </template>
        {{ dataInfo.bankNo }}
      </el-descriptions-item>

      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">开户银行</div>
        </template>
        {{ BankTypeTypesFilter(dataInfo.bankType) }}
      </el-descriptions-item>

      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">银行是否对账户设置特殊标识</div>
        </template>
        {{ dataInfo.bankMark ? "是" : "否" }}
      </el-descriptions-item>

      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">账户状态</div>
        </template>
        {{ dataInfo.accountStatusName }}
      </el-descriptions-item>

      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">开户提交人</div>
        </template>
        {{ dataInfo.creator }}
      </el-descriptions-item>

      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">开户提交日期</div>
        </template>
        {{ dataInfo.createTime }}
      </el-descriptions-item>

      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">开户审批人</div>
        </template>
        {{ dataInfo.checker }}
      </el-descriptions-item>

      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">开户审批日期</div>
        </template>
        {{ dataInfo.checkDate }}
      </el-descriptions-item>

      <el-descriptions-item
        v-if="dataInfo.accountStatus > 2"
        label-align="right"
      >
        <template #label>
          <div class="cell-item">
            {{ AccountStatusFilter(dataInfo.accountStatus) }}操作人
          </div>
        </template>
        {{ dataInfo.operator }}
      </el-descriptions-item>
      <el-descriptions-item
        v-if="dataInfo.accountStatus > 2"
        label-align="right"
      >
        <template #label>
          <div class="cell-item">
            {{ AccountStatusFilter(dataInfo.accountStatus) }}日期
          </div>
        </template>
        {{ dataInfo.operationTime }}
      </el-descriptions-item>
      <el-descriptions-item
        v-if="dataInfo.accountStatus > 2"
        label-align="right"
      >
        <template #label>
          <div class="cell-item">
            {{ AccountStatusFilter(dataInfo.accountStatus) }}原因
          </div>
        </template>
        {{ dataInfo.operationReason }}
      </el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from "vue";
import { getDicts } from "@/store/modules/dict";
import { useScreen } from "@/store/modules/screen";

const screenStore = useScreen();
const mobile = computed(() => screenStore.device);
const screenWidth = ref(900);
const itemSpan = ref(2);
const BankTypeTypes = getDicts("bankTypeTypes"); //银行类别
const AccountStatus = getDicts("accountStatus"); //账户状态

function initScreen() {
  if (mobile.value === "mobile") {
    screenWidth.value = screenStore.screenWidth;
    itemSpan.value = 1;
  } else {
    screenWidth.value = 900;
    itemSpan.value = 2;
  }
}

const props = defineProps({
  dialogDetail: {
    type: Object,
    default: () => ({
      visible: false,
      title: "专户详情信息",
      footBtn: "",
      id: 0,
    }),
  },
  data: {
    type: Object,
    default: () => null,
  },
});

const emit = defineEmits(["sendClose"]);

const loading = ref(false);
let visible = ref(props.dialogDetail.visible);
const dataInfo = ref(props.data);

onMounted(async () => {
  initScreen();
});

/* 发送当前弹窗关闭 */
function sendClose() {
  emit("sendClose", "detail", false);
}

/**
 * 关闭弹窗
 */
function closeDialog() {
  visible.value = false;
  sendClose();
}

/**账户状态 */
function AccountStatusFilter(val: string) {
  let temp = AccountStatus.filter(
    (item: { value: string }) => item.value === val
  );
  if (temp && temp[0]) {
    return temp[0].label;
  } else {
    return "";
  }
}

/**银行名称 */
function BankTypeTypesFilter(val: string) {
  let temp = BankTypeTypes.filter(
    (item: { value: string }) => item.value === val
  );
  if (temp && temp[0]) {
    return temp[0].label;
  } else {
    return "";
  }
}
</script>

<style lang="scss" scoped>
.d_left {
  margin-left: 50px;
}
:deep(.el-form-item) {
  flex-wrap: wrap;
}

:deep(.el-input) {
  width: 200px;
}

:deep(.el-input__wrapper) {
  width: 200px;
}

:deep(.el-form-item__label) {
  color: #696868;
  font-size: 13px;
}
.cell-item {
  font-size: 15px;
  color: #938d8d;
}
</style>
